<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>入口</title>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<nav  class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-id="home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span> 
			</a>
			<a  class="mui-tab-item" data-id="message">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" data-id="center">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
			<a class="mui-tab-item" data-id="setting">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				var subInfos = [{
					url: 'layout/home.html',
					id: 'home'
				}, {
					url: 'layout/message.html',
					id: 'message',
				}, {
					url: 'layout/center.html',
					id: 'center'
				}, {
					url: 'layout/setting.html',
					id: 'setting'
				}];
				var subStyles = {
					top: '45px',
					bottom: '51px'
				};

				// 根据id查询子页面的信息
				var getSubInfoById = function(infoList, id) {
					var result = null;
					for(var i = 0, len = infoList.length; i < len; i++) {
						var _info = infoList[i];
						if(_info.id === id) {
							result = _info;
							break;
						}
					}
					return result;
				};

				var mainWv = plus.webview.currentWebview();
				console.log(mainWv);
				var titleEL = document.querySelector('.mui-title');
				var activeTab = '';

				// 默认只加载首页webview
				var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
				mainWv.append(homeWv);
				activeTab = subInfos[0].id;

				// 点击切换，动态创建其它webview；
				mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
					var _self = this;
					var targetTab = _self.getAttribute('data-id');
//					alert(targetTab+"--"+activeTab);
					if(targetTab === activeTab) {
						return;
					}
//					titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;
					var _subWv = plus.webview.getWebviewById(targetTab);
					// 若webview不存在，则创建；
//					if(!_subWv) {
						var _subInfo = getSubInfoById(subInfos, targetTab);
						_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
						mainWv.append(_subWv);
//					}
					// 隐藏之前的webview
					plus.webview.getWebviewById(activeTab).hide('none');
					activeTab = targetTab;
				});
			});
		</script>
	</body>

</html>